<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Closure</title>
        <style>
        
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            .box {
                margin: 10px;
                width: 100px;
                height: 100px;
                box-shadow: 0px 0px 4px 0px #aaa;
            }
        </style>
        
        <script>
            window.onload = function() {
                var funcs = [];
                
                // 
                // 普通に関数を作る
                // 
                log("普通に関数を作る");
                for (var i=0; i<5; ++i) {
                    funcs[i] = function() { return (i); };
                }
                // 同じ i を参照してしまっているのでどれも同じ値が出力される
                log(funcs[0]());
                log(funcs[1]());
                log(funcs[2]());
                log(funcs[3]());
                log(funcs[4]());
                
                
                
                // 
                // with でクロージャを作る
                // 
                log("with でクロージャ");
                for (var i=0; i<5; ++i) {
                    with({num:i}) {
                        funcs[i] = function() { return (num); };
                    }
                }
                log(funcs[0]());
                log(funcs[1]());
                log(funcs[2]());
                log(funcs[3]());
                log(funcs[4]());
                
                
                // 
                // 無名関数
                // 
                log("無名関数でクロージャ");
                for (var i=0; i<5; ++i) {
                    funcs[i] = (function(i){
                        return function() { return (i); };
                    })(i);
                }
                log(funcs[0]());
                log(funcs[1]());
                log(funcs[2]());
                log(funcs[3]());
                log(funcs[4]());
                
                
                /*
                // let でクロージャを作る
                log("let でクロージャ");
                for (var i=0; i<5; ++i) {
                    let (n = i) {
                        funcs[i] = function() { return (n); };
                    }
                }
                log(funcs[0]());
                log(funcs[1]());
                log(funcs[2]());
                log(funcs[3]());
                log(funcs[4]());
                */
                
                // 
                // with を使ってクリックイベントを登録
                // 
                var boxList = document.getElementsByClassName("box");
                var colorList = ["red", "yellow", "green", "blue", "purple"];
                for (var i=0; i<5; ++i) {
                    // クロージャ
                    with({num:i}) {
                        boxList[i].onclick = function() {
                            this.style.backgroundColor = colorList[num];
                        };
                    }
                }
            };
            
            // ログ出力
            var log = function(str) {
                var eConsole = document.getElementById("console");
                eConsole.innerHTML += str;
                eConsole.innerHTML += '\n';
            };
            
        </script>
    </head>
    <body>
        <h1>Closure</h1>
        <h2>Box</h2>
        <div id="content">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <h2>Console</h2>
        <pre id="console"></pre>
    </body>
</html>